<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
<button class="btn">发送请求</button>

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
// Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中
// 在浏览器使用:基于Promise对ajax进行封装
// 在node.js使用:基于Promise对象http进行封装
// Axios是VUE官方推荐使用的http请求库

let btn = document.querySelector('.btn')
btn.onclick = function (){
    // 当我们引入axios.min.js之后就可以直接使用全局的axios实例
    // console.log( axios )// 默认的axios实例
    // console.log( axios.defaults )// {...}默认的配置对象

    /* axios.defaults.baseURL = 'http://localhost:8080/users'// 设置公共路径
    axios.defaults.timeout = 3000// 设置公共超时

    axios({
        method: 'post',
        url: '/login',
        data: {
            user: 'xiaocuo',
            pass: '123123'
        },
        // timeout: 3000
    })
    .then((res)=>{
        console.log( res.data )
    })

    axios({
        method: 'get',
        url: '/list',
        params: {
            a: 'xiaocuo',
            b: '123123'
        },
        // timeout: 3000
    })
    .then((res)=>{
        console.log( res.data )
    })
    
    // 商品相关的请求无法使用上面的公共设置
    axios({
        method: 'post',
        url: 'http://localhost:8080/goods/add',
        timeout: 5000
    })
    .then((res)=>{
        console.log( res.data )
    })

    axios({
        method: 'post',
        url: 'http://localhost:8080/goods/del',
        timeout: 5000
    })
    .then((res)=>{
        console.log( res.data )
    }) */


    // 根据业务,创建不同的axios实例对象
    let usersAxios = axios.create({// defaults对象
        timeout: 3000,
        baseURL: 'http://localhost:8080/users',
        headers: {'hehe':'haha'},
        responseType: 'json'
    })
    usersAxios.post('/login',{user:'xiaocuo',pass:'123123'})
    .then((res)=>{
        console.log( res.data )
    })

    usersAxios.get('/list?a=123&b456')
    .then((res)=>{
        console.log( res.data )
    })


    // 根据业务,创建不同的axios实例对象
    let goodsAxios = axios.create({// defaults对象
        timeout: 5000,
        baseURL: 'http://localhost:8080/goods',
        headers: {'hehe':'xixi'},
        responseType: 'json'
    })
    goodsAxios.post('/add')
    .then((res)=>{
        console.log( res.data )
    })

    goodsAxios.post('/del')
    .then((res)=>{
        console.log( res.data )
    })

    goodsAxios.post('/update')
    .then((res)=>{
        console.log( res.data )
    })

    goodsAxios.post('/search')
    .then((res)=>{
        console.log( res.data )
    })
}

</script>
</body>
</html>